<template>
    <div style="background: #ffffff;">
        <el-row :gutter="24">
            <el-col :span="14">
                <div style="display: flex;margin: 20px 0 20px 20px;">
                    <div style="display: flex;width: 100px;flex-direction: column;">
                        <span style="color: rgba(0, 0, 0, 0.85);text-align: right;font-size: 14px">账 号：</span>
                        <span style="color: rgba(0, 0, 0, 0.85);text-align: right;font-size: 14px"">Account：</span>
                    </div>
                    <el-input v-model="keyword" placeholder="请输入搜索内容(30字符以内)" size="medium"
                              style="margin: 0 20px 10px" @keyup.enter.native="searchChange"></el-input>
                </div>
            </el-col>
            <el-col :span="3">
                <el-tooltip content="Search" placement="top">
                    <el-button style="margin-top: 20px;" type="success"
                               icon="el-icon-search" size="medium" @click='searchChange'>账号搜索</el-button>
                </el-tooltip>
            </el-col>
            <el-col :span="3">
                <el-tooltip content="Reset" placement="top">
                    <el-button style="margin-top: 20px;" icon="el-icon-refresh"
                               @click="resetChange" size="medium">重置</el-button>
                </el-tooltip>

            </el-col>
        </el-row>

        <el-table
            :data="tableData" border
            style="width: 100%;text-align: center"
            v-loading="loading"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="rgba(0, 0, 0, 0.5)">
            <el-table-column
                             prop="email"
                             label="登录邮箱,Email Adress"
                             min-width="180px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="userName"
                label="姓名,Full Name"
                min-width="100px" :render-header="renderHeader">
            </el-table-column>
            <el-table-column
                prop="organizationName"
                label="购买机构,Purchase Campus"
                min-width="240px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <AccountSelect :scope="scope" :modelType="1"
                                   :organizationList="organizationList"
                                   :departmentList="[]" :costCenterList="[]"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="departmentDesc"
                label="购买部门,Purchase Dept."
                min-width="240px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <AccountSelect :scope="scope" :modelType="2" :departmentList="departmentList"
                                   :organizationList="[]" :costCenterList="[]"/>
                </template>
            </el-table-column>
            <el-table-column
                prop="costCenterDescription"
                label="成本中心,Cost Center"
                min-width="240px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <AccountSelect :scope="scope" :modelType="3" :costCenterList="costCenterList"
                                   :organizationList="[]" :departmentList="[]"/>
                </template>
            </el-table-column>
            <el-table-column fixed="right"
                prop="operation"
                label="权限,Authorization"
                min-width="200px" :render-header="renderHeader">
                <template slot-scope="scope">
                    <AuthOrizationCkeckBox :scope="scope" />
                </template>
            </el-table-column>
        </el-table>

        <PaginationMode :pageData="pageData" @onPageChange="onPageChange" />
    </div>
</template>

<script>
import {userAccountList} from "../../axios/url";
import http from "../../axios/fetch";
import renderHeader from '../../common/renderHeader.js';
import AccountSelect from './AccountSelect'
import CommonSlectList from "../../helpers/CommonSlect";
import AuthOrizationCkeckBox from "./AuthOrizationCkeckBox";
import PaginationMode from '../../common/Pagination.vue';

export default {
        data() {
            return {
                tableData: [],
                pageData: {},
                page: 1,
                keyword: null,
                loading: true,
            }
        },
        components: {
            AccountSelect,
            AuthOrizationCkeckBox,
            PaginationMode
        },
        mounted(){
            this.getUserAccountList();
            this.getCostCenterList();
            this.getOrganizationList();
            this.getDepartmentList();
        },
        mixins: [CommonSlectList],
        methods: {
            renderHeader: renderHeader,
            getUserAccountList(param) { // 列表数据
                try{
                    http.post(userAccountList, param).then(res => {
                        if(res.data && res.data.resultMess === "success") {
                            this.hiddenLoading();
                            this.tableData = res.data.data.list
                            this.pageData = res.data.data.page
                        }
                    })
                } catch (e){
                    this.hiddenLoading();
                    this.$notify.error({
                        title: '提示',
                        message: '网络错误',
                    });
                }
            },
            onPageChange(page) { // 分页
                this.showLoading();
                const param = {
                    page: page,
                    email: this.keyword,
                }
                this.getUserAccountList(param);
            },
            searchChange() { // 搜索
                this.showLoading();
                const param = {
                    page: this.page,
                    email: this.keyword,
                }
                this.getUserAccountList(param);
            },
            resetChange() { // 重置
                this.showLoading();
                this.email = null;
                this.page = 1;
                this.showLoading();
                const param = {
                    page: 1,
                    startItemNum: null,
                    endItemNum: null
                }
                this.getUserAccountList(param);
            },
            showLoading() {
                this.loading = true;
            },
            hiddenLoading() {
                this.loading = false;
            }
        },
    }

</script>

<style>

</style>

